
import { Vue, Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import PageContainer from '@/moduleC/components/layout/PageContainer.vue'
import TabBar from '@/moduleC/components/base/TabBar.vue'
import BillList from './components/BillList.vue'
import IntegralList from './components/IntegralList.vue' 
import CouponList from './components/CouponList.vue'
import { UserInfo, load } from '@/moduleC/types/user'
import { OrderItem } from '@/moduleC/types/order'
import { api } from '@/moduleC/api'
import { PageParams } from '@/moduleC/types/api'
import store from '@/moduleC/store'

// Create a namespace for the user module
const userModule = namespace('user')

@Component({
  components: {
    PageContainer,
    TabBar,
    BillList,
    IntegralList,
    CouponList
  }
})
export default class AssetsPage extends Vue {

  private tabs = ['账单', '积分', '卡券']
  private currentTab = 0
  private billTypes = ['全部账单', '收入', '支出']
  private billTypeIndex = 0
  private loading = false
  private hasMore = true
  private billList: OrderItem[] = []
  private integralList: any[] = []
  private carIntegraList: any[] = []
  
  private cardList: any[] = []
  private page = 1
  private pageSize = 10
  private selectedDate = new Date().toISOString().split('T')[0] // Format: YYYY-MM-DD
	onLoad(option: load): void{
		
		this.handleTabChange(Number(option.idx))
	}


  onPullDownRefresh() {
    this.refresh()
  }

  onReachBottom() {
    this.loadMore()
  }

  handleTabChange(index: number) {
    this.currentTab = index
    this.loadData()
  }

  async loadMore() {
    if (this.loading || !this.hasMore) return
    await this.loadData()
  }

  async refresh() {
    this.billList = []
    this.integralList = []
    this.carIntegraList = []
    this.hasMore = true
    await this.loadData()
  }

  private async loadData() {
    this.loading = true
    try {
      // 根据 currentTab 加载对应数据
      switch (this.currentTab) {
        case 0:
          await this.loadBillList()
          break
        case 1:
          await this.loadIntegralList()
          break
        case 2:
          await this.loadCardList()
          break
      }
    } finally {
      this.loading = false
    }
  }

  private async loadBillList() {
    const params: PageParams = {
      page: this.page,
      pageSize: this.pageSize,
      date: this.selectedDate,
      type: this.billTypeIndex
    }

    const res = await api.getBillList(params)
    
    if (res.code === 0) {
      this.billList = [...this.billList, ...res.data.list as OrderItem[]]
      this.hasMore = res.data.hasMore
    }
  }

  private async loadIntegralList() {
    const res = await api.getIntegralList({
      page: this.page,
      pageSize: this.pageSize
    })
    
    if (res.code === 0) {
      this.integralList = [...this.integralList, ...res.data.list]
      this.hasMore = res.data.hasMore
    }
  }

  private async loadCardList() {
    const params: PageParams = {
      page: 1,
      pageSize: 999, // Large number to get all coupons
      level: this.computedUserInfo?.level
    }
    const res = await api.getCouponList(params)
    if (res.code === 0) {
	  this.carIntegraList = res.storeList
      this.cardList = res.data
    }
  }
  private onBillTypeChange(e: { detail: { value: number } }) {
  	const index = e.detail.value
  	if (this.billTypeIndex !== index) {
  		this.billTypeIndex = index
  		this.handleTabChange(this.currentTab)
  	}
  }
  get currentBillType(): string {
    return this.billTypes[this.billTypeIndex]
  }


  get computedUserInfo(): UserInfo {
	  
    return store.state.user || {
      id: 0,
      level: 0,
      name: ''
    }
  }

  get formatDate(): string {
    const date = new Date(this.selectedDate)
    return `${date.getFullYear()}年${date.getMonth() + 1}月`
  }

  onDateChange(e: { detail: { value: string } }) {
    this.selectedDate = e.detail.value
    this.refresh()
  }
}